<template>
  <div class="ranking-list-container">
    <el-scrollbar>
      <ul class="ranking-list">
        <li v-for="(item, index) in rankingList" :key="index" class="ranking-item">
          <span class="rank-number">{{ `${index + 1}．` }}</span>
          <span class="company-name">{{ item.name }}</span>
          <span style="color: #0da9ff" class="count">{{ item.count }}项</span>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "RankingList",
  data() {
    return {
      rankingList: [
        { name: "第二工程公司", count: 26 },
        // ...其他项目...
        { name: "西藏分公司", count: 0 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
        { name: "第二工程公司", count: 26 },
      ],
    };
  },
};
</script>

<style scoped>
.ranking-list-container {
  height: 350px;
  overflow-y: auto;
}

.ranking-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ranking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #ebebeb;
}

.rank-number,
.company-name,
.count {
  flex: 1;
  text-align: left;
}

.company-name {
  flex: 2; /* 让公司名称占更多的空间 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count {
  text-align: right;
}
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 3px; /* 滚动条宽度 */
  background-color: transparent;
}

::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #dddddd; /* 轨道颜色 */
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #5bc0de; /* 滑块颜色 */
  transition: background-color 0.3s ease-in-out;
}

/*::-webkit-scrollbar-thumb:hover {*/
/*  background-color: rgba(0, 0, 0, 0.7); !* 鼠标悬停时的颜色 *!*/
/*}*/



/* 响应式设计 */
/*67%*/
@media screen and (min-width: 2801px) and (max-width: 2900px) {
  .ranking-list-container {
    height: 590px;
    /*border: 1px solid #f00;*/
  }
}
@media screen and (min-width: 2701px) and (max-width: 2800px) {
  .ranking-list-container {
    height: 575px;
    /*border: 1px solid #f00;*/
  }
}
@media screen and (min-width: 2601px) and (max-width: 2700px) {
  .ranking-list-container {
    height: 550px;
    /*border: 1px solid #f00;*/
  }
}
/*75%*/
@media screen and (min-width: 2501px) and (max-width: 2600px) {
  .ranking-list-container {
    height: 520px;
    /*border: 1px solid #f00;*/
  }
}
@media screen and (min-width: 2401px) and (max-width: 2500px) {
  .ranking-list-container {
    height: 505px;
    /*border: 1px solid #f00;*/
  }
}
/*80%*/
@media screen and (min-width: 2301px) and (max-width: 2400px) {
  .ranking-list-container {
    height: 490px;
    /*border: 1px solid #f00;*/
  }
}
@media screen and (min-width: 2201px) and (max-width: 2300px) {
  .ranking-list-container {
    height: 455px;
    /*border: 1px solid #f00;*/
  }
}
/*90%*/
@media screen and (min-width: 2101px) and (max-width: 2200px) {
  .ranking-list-container {
    height: 420px;
    /*border: 1px solid #f00;*/
  }
}
@media screen and (min-width: 2001px) and (max-width: 2100px) {
  .ranking-list-container {
    height: 400px;
    /*border: 1px solid #f00;*/
  }
}
/*100%*/
@media screen and (min-width: 1901px) and (max-width: 2000px) {
  .ranking-list-container {
    height: 380px;
    /*border: 1px solid #f00;*/
  }
}
@media screen and (min-width: 1801px) and (max-width: 1900px) {
  .ranking-list-container {
    height: 360px;
    /*border: 1px solid #f00;*/
  }
}
/*110%*/
@media screen and (min-width: 1701px) and (max-width: 1800px) {
  .ranking-list-container {
    height: 340px;
    /*border: 1px solid #f00;*/
  }
}
@media screen and (min-width: 1601px) and (max-width: 1700px) {
  .ranking-list-container {
    height: 310px;
    /*border: 1px solid #f00;*/
  }
}
/*125%*/
@media screen and (min-width: 1501px) and (max-width: 1600px) {
  .ranking-list-container {
    height: 280px;
    /*border: 1px solid #f00;*/
  }
}
@media screen and (min-width: 1401px) and (max-width: 1500px) {
  .ranking-list-container {
    height: 260px;
    /*border: 1px solid #f00;*/
  }
}
@media screen and (min-width: 1301px) and (max-width: 1400px) {
  .ranking-list-container {
    height: 245px;
    /*border: 1px solid #f00;*/
  }
}
/*150%*/
@media screen and (min-width: 1201px) and (max-width: 1300px) {
  .ranking-list-container {
    height: 220px;
    /*border: 1px solid #f00;*/
  }
}
@media screen and (min-width: 1101px) and (max-width: 1200px) {
  .ranking-list-container {
    height: 200px;
    /*border: 1px solid #f00;*/
  }
}

@media screen and (min-width: 1001px) and (max-width: 1100px) {
  .ranking-list-container {
    height: 170px;
    /*border: 1px solid #f00;*/
  }
}

@media screen and (max-width: 767px) {
  .ranking-list-container {
    height: 130px;
    /*border: 1px solid #f00;*/
  }
}
</style>
